<template>
  <div>
 <div>姓名：{{ name }}</div>
<div>年龄：{{ age }}</div>
<div>地址：{{ address }}</div>
<button @click="changeName">改变姓名</button>
<button @click="changeAge">年龄+1</button>
<button @click="showTel">展示电话</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import { ref } from 'vue'

  let name = ref('张三')  //此时的name不是响应式数据
  let age = ref(18)
  let address = '银河'
  let tel = '123456'
  function changeName(){
    name.value = '王五'
    console.log(name.value);
  }
  function changeAge(){
    age.value +=1
    console.log(age.value);
    
  }
  function showTel(){
    alert(tel)
    console.log('123456')
  }
</script>
<style>

</style>